<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8" />
    <title>json格式化及高亮美化 - 前端工具箱 - 猿来如此</title>
    <meta name='author' content='猿来如此'/>
    <meta name='copyright' content='whoopsfeed.com'/>
    <meta name="keywords" content="css/js/html/json 格式化工具"/>
    <meta name="description" content="猿来如此-工具箱:css/js/html/json 格式化工具"/>
    <link rel="stylesheet" type="text/css" href="./assets/styles/style.css"/>
    <link rel="stylesheet" type="text/css" href="./assets/styles/font-awesome.min.css"/>
    <script type="text/javascript" src="./assets/scripts/seajs/sea.js"></script>
    <script>
        seajs.config({
            charset: 'utf-8',
            alias: {
                'jquery': 'jquery/jquery.last',
                'seajs-log':'seajs/plugins/seajs-log',
                'seajs-debug':'seajs/plugins/seajs-log'
            },
            debug:true,
            preload: ["jquery",'seajs-log']
        });
        var app = app ||{};
        app.baseUrl = "http://tool.yanue.net/";
        app.sign = "sign";
    </script>
</head>
<body>
<?php
include './view/common/header.php';
?>
<section class="wrap">
    <section class="content">
        <style type="text/css">
    /* CSS Document */
    div.Canvas{font-family: Lucida Console, Georgia; font-size: 13px;background-color:#ECECEC;color:#000000;border:solid 1px #CECECE;}
    .ObjectBrace{color:#00AA00;font-weight:bold;}
    .ArrayBrace{color:#0033FF;font-weight:bold;}
    .PropertyName{color:#CC0000;font-weight:bold;}
    .String{color:#007777;}
    .Number{color:#AA00AA;}
    .Boolean{color:#0000FF;}
    .Function{color:#AA6633; text-decoration:italic;}
    .Null{color:#0000FF;}
    .Comma{color:#000000; font-weight:bold;}
</style>
<script type="text/javascript">
    seajs.use('format/json-format',function(f){
        f.init();
        $(document).on('click', '#json-compress-btn', function() {
            var code = $('#code-area').val();
            formatCode = f.compress(code);
            $('#code-area').val(formatCode)
        })
    })
</script>
<section class="tool-area">
    <h1 class="tool-title">
        <i class="icon icon-hand-right"></i> JSON格式化及高亮美化工具
    </h1>
    <textarea class="code-area" id="code-area" style="width: 100%;height: 100px;"></textarea>
    <p class="tool-btn">
        <input type="button" value="压　缩" class="btn btn-info" id="json-compress-btn" />
        <input type="button" value="格式化" class="btn btn-success" id="json-format-btn" />
        <span>缩进量</span>
        <select id="TabSize">
            <option value="2" selected="true">2</option>
            <option value="4">4</option>
            <option value="6">6</option>
            <option value="8">8</option>
        </select>
        <span>
          (请在上面的区域输入<mark>JSON</mark>代码)
        </span>
        <a href="javascript:;" class="SelectAllClicked" style="float: right;">全选结果</a>
    </p>
</section>
<article class="tool-detail">
    <div id="Canvas" class="Canvas" style="overflow-x:auto;"></div>
</article>
<!--Duoshuo Comment BEGIN-->
<div class="ds-thread">
</div>
<script type="text/javascript">
    var duoshuoQuery = {
        short_name: "whoopsfeed"
    };
    (function() {
        var ds = document.createElement('script');
        ds.type = 'text/javascript';
        ds.async = true;
        ds.src = 'http://static.duoshuo.com/embed.js';
        ds.charset = 'UTF-8';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ds)
    })();
</script>
<!--Duoshuo Comment END-->
    </section>
    <aside class="sidebar">
    <h2 class="side-title"><i class="icon icon-hand-right"></i> 前端工具箱 <i class="icon icon-hand-left"></i></h2>
    <div class="side-widget">
        <ul class="side-list">
            <li>
                <a href="./format.php?t=css" class=""><i class="icon icon-angle-right"></i> css格式化美化工具</a>
            </li>
            <li>
                <a href="./format.php?t=html" class=""><i class="icon icon-angle-right"></i>HTML格式化压缩工具</a>
            </li>
            <li>
                <a href="./format.php?t=js" class=""><i class="icon icon-angle-right"></i> JS美化压缩加密工具</a>
            </li>
            <li>
                <a href="./format.php?t=json" class=""><i class="icon icon-angle-right"></i> JSON格式化工具</a>
            </li>
        </ul>
    </div>
</aside></section>
<div class="clearfix"></div>
<?php
include './view/common/footer.php';
?>
</body>
</html>